<template>
  <view class="alumni-org-page">
	  <!-- 顶部自定义导航 -->
	  <tn-nav-bar fixed alpha customBack>
	  	<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
	  		<text class='icon tn-icon-left'></text>
	  	</view>
	  </tn-nav-bar>
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="empty"></text>
      <text class="title">校友组织</text>
      <view class="empty"></view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <text class="search-icon"></text>
      <input type="text" placeholder="搜索校友会" class="search-input" v-model="searchKeyword" />
    </view>

    <!-- 一级分类标签（含"全部"） -->
    <view class="category-tabs">
      <view 
        v-for="(tab, index) in categories" 
        :key="index"
        :class="['tab-item', activeTab === index ? 'active' : '']"
        @click="activeTab = index"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 组织列表（网格布局） -->
    <view class="organizations-grid">
      <view class="org-card" v-for="(org, index) in filteredOrganizations" :key="index" @click="viewOrgDetail(org)">
        <view class="org-logo">
          <!-- 所有分类统一使用同一个模板图片 -->
          <image src="/static/tabbar/navlogo.png" mode="widthFix"></image>
        </view>
        <text class="org-name">{{ org.name }}</text>
        <!-- 仅保留成员数显示 -->
        <text class="org-members">成员: {{ org.memberCount }}人</text>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-if="filteredOrganizations.length === 0">
      <image src="/static/templates/empty.png" mode="widthFix" class="empty-img"></image>
      <text class="empty-text">暂无相关校友会组织</text>
    </view>

    <!-- 创建按钮 -->
    <button class="create-btn" @click="navigateToCreate">
      <text class="plus-icon">+</text>
      创建校友会
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 分类包含"全部"和四大类
      categories: ['全部', '地方校友会', '院系校友会', '行业校友会', '同趣校友会'],
      activeTab: 0, // 默认选中"全部"
      searchKeyword: '',

      // 组织数据
      organizations: [
        // 地方校友会（category:1）
        { id: 1, name: '北京校友会', category: 1, memberCount: 1280 },
        { id: 2, name: '上海校友会', category: 1, memberCount: 2150 },
        { id: 3, name: '广州校友会', category: 1, memberCount: 860 },
        { id: 4, name: '深圳校友会', category: 1, memberCount: 920 },

        // 院系校友会（category:2）
        { id: 5, name: '计算机学院校友会', category: 2, memberCount: 890 },
        { id: 6, name: '商学院校友会', category: 2, memberCount: 1560 },
        { id: 7, name: '文学院校友会', category: 2, memberCount: 530 },

        // 行业校友会（category:3）
        { id: 8, name: '金融行业校友会', category: 3, memberCount: 750 },
        { id: 9, name: '教育行业校友会', category: 3, memberCount: 620 },

        // 同趣校友会（category:4）
        { id: 10, name: '校友摄影协会', category: 4, memberCount: 320 },
        { id: 11, name: '校友足球俱乐部', category: 4, memberCount: 180 },
        { id: 12, name: '校友读书会', category: 4, memberCount: 250 }
      ]
    };
  },
  computed: {
    // 筛选逻辑：全部显示所有，其他分类只显示对应类别
    filteredOrganizations() {
      return this.organizations.filter(org => {
        // 分类筛选："全部"显示所有，其他分类只显示对应category
        const matchCategory = this.activeTab === 0 ? true : org.category === this.activeTab;
        // 搜索筛选
        const matchSearch = this.searchKeyword
          ? org.name.includes(this.searchKeyword)
          : true;
        return matchCategory && matchSearch;
      });
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    viewOrgDetail(org) {
      uni.navigateTo({ url: `/pages/alumni/org-detail?id=${org.id}` });
    },
    navigateToCreate() {
      uni.navigateTo({ url: '/pages/alumni/create-org' });
    }
  }
};
</script>

<style scoped>
/* 基础样式 - 绿色系主题 */
.alumni-org-page {
  min-height: 100vh;
  background-color: #f6faf7; /* 浅绿背景 */
  padding-bottom: 140rpx;
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #e8f3ea; /* 浅绿边框 */
}

/* 自定义导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;
}
.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}

.title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2d7d46; /* 深绿标题 */
}

.empty {
  width: 50rpx;
}

/* 搜索框 */
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 60rpx;
  padding: 15rpx 25rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(45, 125, 70, 0.08); /* 绿色阴影 */
}

.search-icon {
  font-size: 28rpx;
  color: #6aa84f; /* 中绿图标 */
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
  height: 40rpx;
}

.search-input::placeholder {
  color: #b3d9b3; /* 浅绿占位符 */
}

/* 分类标签 - 绿色系样式 */
.category-tabs {
  display: flex;
  overflow-x: auto;
  padding: 15rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #e8f3ea;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.tab-item {
  flex-shrink: 0;
  padding: 12rpx 30rpx;
  margin-right: 15rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
  color: #6aa84f; /* 中绿文字 */
  background-color: #f0f7f1; /* 浅绿背景 */
  white-space: nowrap;
}

.tab-item.active {
  background-color: #2d7d46; /* 深绿选中背景 */
  color: #fff; /* 白色选中文字 */
}

/* 组织列表 - 绿色系卡片 */
.organizations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 20rpx;
}

.org-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  box-shadow: 0 2rpx 10rpx rgba(45, 125, 70, 0.08); /* 绿色阴影 */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}

.org-card:active {
  transform: scale(0.98);
}

.org-logo {
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto 20rpx;
}

.org-logo image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.org-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #2d7d46; /* 深绿名称 */
  margin-bottom: 15rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 仅保留成员数显示 */
.org-members {
  font-size: 24rpx;
  color: #6aa84f; /* 中绿成员数 */
  margin-top: auto;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150rpx 0;
  color: #99c794; /* 浅绿空状态 */
}

.empty-img {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
}

/* 创建按钮 - 绿色主按钮 */
.create-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 90rpx;
  background-color: #36b37e; /* 主绿按钮 */
  color: #fff;
  border-radius: 45rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5rpx 15rpx rgba(54, 179, 126, 0.3); /* 绿色按钮阴影 */
  border: none;
}

.plus-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
  line-height: 1;
}
</style>